<template>
  <view class="public-bottom-foot">
    <view class="log">
      <svg
        viewBox="0 0 81 20"
        width="3.6rem"
        height="1.5rem"
        fill="#67748e"
        @click="onIndex">
        <path
          fill-rule="evenodd"
          d="M11.533 0 3.969 8.895V0H.101v19.534h3.868V10.72l7.719 8.814h4.973L8.119 9.77 16.429 0zm14.265 5.52c-1.436 0-2.764.516-3.739 1.452l-.335.322V.007h-3.822V12.46c0 4.647 2.743 7.535 7.156 7.535s7.448-3.038 7.448-7.224c0-4.187-2.818-7.25-6.705-7.25h-.003Zm-.606 10.929c-2.007 0-3.642-1.657-3.642-3.69s1.635-3.688 3.642-3.688 3.64 1.656 3.64 3.689-1.634 3.689-3.64 3.689m50.65-10.471h4.259l-5.662 6.778 5.662 6.782h-4.259l-4.893-5.857v5.857h-3.822V0h3.822v11.835zm-16.21-.457c-2.36 0-3.817 1.118-4.51 1.9v-1.44H51.43v13.557h3.825v-7.382c0-1.846 1.267-3.133 2.855-3.133 1.587 0 2.854 1.287 2.854 3.133v7.382h3.822v-8.544c0-3.174-2.27-5.473-5.154-5.473M34.3 12.77c0-4.201 3.1-7.25 7.369-7.25 4.301 0 7.423 3.049 7.423 7.25v6.77h-3.48v-1.92l-.216.303c-.014.022-1.508 2.073-4.305 2.073-3.937 0-6.791-3.024-6.791-7.224Zm3.843-.011c0 2.033 1.635 3.689 3.641 3.689s3.641-1.657 3.641-3.69S43.79 9.07 41.784 9.07s-3.641 1.656-3.641 3.689"
          clip-rule="evenodd"></path>
      </svg>
    </view>
    <view class="bottom-text">
      <view class="title">{{ $t('bottom.guide') }}</view>
      <view class="list">
        <text
          v-for="(item, index) in bottomList"
          :key="index"
          @click="onGo(item.url, item.name)">
          {{ $t(item.name) }}
        </text>
      </view>
      <view class="title">{{ $t('service.title2') }}</view>
      <view class="list phone-list">
        <view class="left-text">
          <text
            >{{ $t('foot.bottom.name1') }}：{{ footerData.serviceInfo.phoneNumber
            }}<text style="margin-left: 20rpx"
              >{{ $t('foot.bottom.name4') }}：{{ footerData.serviceInfo.phoneHours }}</text
            ></text
          >
          <text
            >{{ $t('foot.bottom.name2') }}：{{ footerData.serviceInfo.email
            }}<text style="margin-left: 20rpx"
              >{{ $t('foot.bottom.name9') }}：{{ footerData.serviceInfo.representativeName }}</text
            ></text
          >
          <text
            >{{ $t('foot.bottom.name10') }}：{{ footerData.serviceInfo.headquartersAddress }}</text
          >
          <text
            >*{{ $t('foot.bottom.name11') }}：{{
              footerData.serviceInfo.complianceReviewNumber
            }}（{{ footerData.serviceInfo.complianceReviewStartDate }}~{{
              footerData.serviceInfo.complianceReviewEndDate
            }}）</text
          >
          <text
            >*{{ $t('foot.bottom.name12')
            }}{{ footerData.serviceInfo.creditAssociationReviewNumber }}（{{
              footerData.serviceInfo.creditAssociationReviewStartDate
            }}~{{ footerData.serviceInfo.creditAssociationReviewEndDate }}）</text
          >
        </view>
        <!-- <view class="right-text">
          <text>{{ $t('foot.bottom.name4') }}</text>
          <text>{{ $t('foot.bottom.name5') }}</text>
          <text>{{ $t('foot.bottom.name6') }}</text>
          <text>{{ $t('foot.bottom.name7') }}</text>
          <text>{{ $t('foot.bottom.name8') }}</text>
        </view> -->
      </view>
      <view class="title">{{ $t('bottom.text1') }}</view>
      <view class="bot-img">
        <!-- footerData.partner -->
        <image
          v-for="item in footerData.partner"
          :src="item.partnerImg"
          style="width: 70rpx; height: 70rpx; border-radius: 70rpx"
          @click="onBottom(item.partnerTitle)">
        </image>
        <!-- <image src="/static/bottom-3.svg" @click="onBottom(0)"></image>
        <image src="/static/bottom-4.svg" @click="onBottom(1)"></image>
        <image src="/static/bottom-2.svg" @click="onBottom(2)"></image>
        <image src="/static/bottom-1.svg" @click="onBottom(3)"></image> -->
      </view>
      <view class="copyright">{{ $t('bottom.text2') }}</view>
      <view class="bottom-logo-box">
        <image
          src="/static/bottom-logo.png"
          mode="widthFix"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { reactive, onMounted } from 'vue'
  import { useUser } from '@/hooks/useUser'

  const { needLogin } = useUser()

  const footerData = reactive({
    partner: [],
    serviceInfo: {}
  })

  const bottomList = [
    {
      name: 'nav.title14',
      url: '/pages/bank-index/bank-index?index=4'
    },
    {
      name: 'nav.title17',
      url: '/pages/product/product'
    },
    {
      name: 'nav.title5-1',
      url: ''
    },
    {
      name: 'nav.title5-2',
      url: ''
    },
    {
      name: 'nav.title15',
      url: '/pages/comment/comment'
    },
    {
      name: 'nav.title11',
      url: '/pages/problem/problem'
    },
    {
      name: 'nav.title19',
      url: '/pages/user-guide/user-guide'
    },

    {
      name: 'nav.title10',
      url: '/pages/protocol/protocol'
    },
    {
      name: 'nav.title16',
      url: '/pages/notice/notice'
    }
    // { name: 'nav.title18', url: '/pages/call-center/call-center' }
  ]

  const onGo = (url, name) => {
    if (url) {
      uni.reLaunch({
        url
      })
    } else {
      const isShow = name === 'nav.title5-2'
      needLogin(isShow ? 'enterprise' : '').then((res) => {
        if (res) {
          uni.navigateTo({
            url: `/pages/apply-for/apply-for${isShow ? '?type=enterprise' : ''}`
          })
        }
      })
    }
  }

  const onBottom = (url) => {
    if (!url) return
    // window.open(url, '_blank')
    window.location.href = url
  }

  const onIndex = () => {
    console.log('跳转首页')
    uni.reLaunch({
      url: '/pages/index/index'
    })
  }

  function getInfo() {
    setTimeout(() => {
      footerData.serviceInfo = uni.getStorageSync('serviceInfo')
      footerData.partner = uni.getStorageSync('partner')
      if (footerData.serviceInfo && footerData.partner) {
        clearTimeout()
      } else {
        getInfo()
      }
    }, 300)
  }

  onMounted(() => {
    footerData.serviceInfo = uni.getStorageSync('serviceInfo')
    footerData.partner = uni.getStorageSync('partner')
    if (!footerData.serviceInfo && !footerData.partner) {
      getInfo()
    }
  })
</script>

<style lang="scss" scoped>
  .public-bottom-foot {
    background: #e2ecf8;
    padding: 52rpx 32rpx 0;

    .log {
      // margin: 30rpx 0 40rpx;
      padding: 30rpx 0 36rpx;
    }

    .bottom-text {
      .list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20rpx;
        margin-bottom: 68rpx;

        text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #666666;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }

      .phone-list {
        display: flex;

        .left-text,
        .right-text {
          display: flex;
          flex-direction: column;
          line-height: 40rpx;
        }

        .right-text {
          line-height: 38rpx;
        }
      }

      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #666666;
        font-style: normal;
        text-transform: none;
        margin-bottom: 16rpx;
      }

      .bot-img {
        display: flex;
        margin-bottom: 32rpx;

        image + image {
          margin-left: 24rpx;
        }

        image {
          width: 48rpx;
          height: 48rpx;
        }
      }

      .copyright {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #666666;
        text-align: left;
        font-style: normal;
        text-transform: none;
        padding-bottom: 30rpx;
      }

      .bottom-logo-box {
        width: 80rpx;
        padding-bottom: 100rpx;

        image {
          width: 100%;
        }
      }
    }
  }
</style>
